<template>
	<view class="add-contract-base-info-box">
		<view class="add-form-box">
			<view class="form-radio-item">
				<view class="title">报销类型</view>
				<radio-group @change="radioChangeType">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in expenseTypeEntities"
						:key="item.id">
						<view>
							<radio :value="item.id" color="#3f8cf7" :checked="(index+1) === currentRadioType"
								style="transform: scale(0.7)" />
						</view>
						<view>{{ item.label }}</view>
					</label>
				</radio-group>
			</view>
			<view class="form-item">
				<view class="title">报销人</view>
				<view style="display: flex;align-items: center;" @click="loadModal(5)">
					<input class="uni-input" placeholder="请选择报销人" v-model="userName" disabled />
					<uni-icons type="right" size="16" style="color: #666;"></uni-icons>
				</view>
			</view>
			<!-- <view class="form-item">
				<view class="title">部门</view>
				<input class="uni-input" placeholder="部门" v-model="expenseEntity.contractPrice" />
			</view> -->
			<view class="form-item">
				<view class="title">所属项目</view>
				<view style="display: flex;align-items: center;" @click="loadModal(1)">
					<input class="uni-input" placeholder="请选择所属项目" v-model="projectName" disabled />
					<uni-icons type="right" size="16" style="color: #666;"></uni-icons>
				</view>
			</view>
			<view class="form-item">
				<view class="title">开始日期</view>
				<uni-datetime-picker type="date" class="uni-input" placeholder="请选择开始日期" :clear-icon="false"
					v-model="expenseEntity.startTime" />
			</view>
			<view class="form-item">
				<view class="title">结束日期</view>
				<uni-datetime-picker type="date" class="uni-input" placeholder="请选择结束日期" :clear-icon="false"
					v-model="expenseEntity.endTime" />
			</view>
			<view class="form-item">
				<view class="title">报销说明</view>
				<input class="uni-input" placeholder="报销说明" v-model="expenseEntity.remark" />
			</view>
			<view class="form-item">
				<view class="title">单据票号</view>
				<input class="uni-input" placeholder="单据票号" v-model="expenseEntity.documentNumber" />
			</view>
			<view class="form-item">
				<view class="title">报销金额</view>
				<input class="uni-input" placeholder="请输入报销金额" v-model="expenseEntity.amount" />
			</view>
			<view class="form-radio-item">
				<view class="title">支付方式</view>
				<radio-group @change="radioChangePayType">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in expensePayTypeEntities"
						:key="item.id">
						<view>
							<radio :value="item.id" color="#3f8cf7" :checked="index === currentRadioPayType"
								style="transform: scale(0.7)" />
						</view>
						<view>{{ item.label }}</view>
					</label>
				</radio-group>
			</view>
			<view class="form-item">
				<view class="title">开户行</view>
				<input class="uni-input" placeholder="请输入开户行" v-model="expenseEntity.bank" disabled />
			</view>
			<view class="form-item">
				<view class="title">银行账号</view>
				<input class="uni-input" placeholder="请输入银行账号" v-model="expenseEntity.bankAccount" disabled />
			</view>
			<view class="form-item" style="border-bottom: none;">
				<view class="title">付款摘要</view>
				<input class="uni-input" placeholder="请输入付款摘要" v-model="expenseEntity.abstractInfo" />
			</view>
			<button style="margin: 20rpx" type="primary" @click="saveContract">
				下一步
			</button>
		</view>
		<!-- 选择项目、报销人 -->
		<view class="bottom-modal-box">
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<view class="item" v-for="data in dataEntities" @click="loadModalValue(data)">
						{{data.title}}
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 执行状态 -->
		<!-- <view class="bottom-modal-box">
			<uni-popup ref="executeStatus" background-color="#fff">
				<view class="popup-content">
					<view class="item" v-for="data in executeStatusEntities" @click="loadExecuteStatusValue(data)">
						{{data.label}}
					</view>
				</view>
			</uni-popup>
		</view> -->
	</view>
</template>

<script>
	import {
		api,
		post
	} from '@/util/api.js'
	export default {
		props: {
			flag: 0, // 1销售合同 2采购合同
			id: '', // 修改时的合同Id
		},
		data() {
			return {
				expenseEntity: {
					expenseType: 1,
					payType: 0,
					bank: '',
					bankAccount: ''
				},
				dataEntities: [],
				currentRadioType: 1,
				expenseTypeEntities: [{
						id: '1',
						label: '出差报销',
						checked: 'true',
					},
					{
						id: '2',
						label: '采购报销'
					}
				],
				currentRadioPayType: 0,
				expensePayTypeEntities: [{
						id: '0',
						label: '银行卡',
						checked: 'true',
					},
					{
						id: '1',
						label: '现金'
					},
					{
						id: '2',
						label: '支付宝'
					},
					{
						id: '3',
						label: '微信'
					}
				],
				type: 0,
				projectName: '', // 选中的项目名称
				userName: '', // 选中的销售负责人
			}
		},
		created() {
			//this.executeStatusEntities = this.flag == 1 ? this.saleExecuteStatus : this.procureExecuteStatus
			if (this.id) {
				this.querySingle()
			}
		},
		methods: {
			async querySingle() {
				let result = await post(api.ExpenseSingle, {
					id: this.id
				})
				this.expenseEntity = result.data
				this.currentRadioType = result.data.expenseType
				this.currentRadioPayType = result.data.payType
				if (result.data.expenseUserId) {
					post(api.UserSingle, {
						id: result.data.expenseUserId
					}).then(res => {
						this.userName = res.data.name
					})
				}
				if (result.data.projectId) {
					post(api.ProjectSingle, {
						id: result.data.projectId
					}).then(res => {
						this.projectName = res.data == null ? null : res.data.projectName
					})
				}
			},
			saveContract() {
				if (this.expenseEntity.expenseUserId == '' || this.expenseEntity.expenseUserId == undefined) {
					return uni.showToast({
						icon: 'none',
						title: '报销人不能为空'
					})
				}
				if (this.expenseEntity.documentNumber == '' || this.expenseEntity.documentNumber == undefined) {
					return uni.showToast({
						icon: 'none',
						title: '单据票号不能为空'
					})
				}
				if (this.expenseEntity.amount == '' || this.expenseEntity.amount == undefined) {
					return uni.showToast({
						icon: 'none',
						title: '报销金额不能为空'
					})
				}
				// 保存，跳转下一页
				let url = this.id ? api.UpdateExpense : api.SaveExpense
				post(url, this.expenseEntity).then(res => {
					if (res.code == '000000') {
						uni.$emit('changeTab', 1, res.data.id)
					} else {
						uni.showToast({
							icon: 'error',
							title: '提交失败'
						})
					}
				})
			},
			// 打开加载页面
			loadModal(type) {
				this.type = type
				this.dataEntities = []
				if (type == 1) {
					this.queryProject(type)
				} else if (type == 5) {
					this.queryUser(type)
				}
				this.$refs.popup.open('bottom')
			},
			// 查询项目
			queryProject(type) {
				let that = this
				post(api.ProjectEntities, {}).then(res => {
					res.data.forEach(function(item, index) {
						let data = {}
						data.id = item.id
						data.title = item.projectName
						that.dataEntities.push(data)
					})
				})
			},
			// 报销人
			queryUser(type) {
				let that = this
				post(api.UserEntities, {}).then(res => {
					res.data.forEach(function(item, index) {
						let data = {}
						data.id = item.id
						data.title = item.name
						data.bank = item.bank
						data.bankAccount = item.bankAccount
						that.dataEntities.push(data)
					})
				})
			},
			// 点击弹框中的选项，返回给输入框
			loadModalValue(data) {
				if (this.type == 1) {
					this.expenseEntity.projectId = data.id
					this.projectName = data.title
				} else if (this.type == 5) {
					this.expenseEntity.expenseUserId = data.id
					this.userName = data.title
					this.expenseEntity.bank = data.bank
					this.expenseEntity.bankAccount = data.bankAccount
				}
				this.$refs.popup.close()
			},
			// radio单选
			radioChangeType: function(evt) {
				for (let i = 0; i < this.expenseTypeEntities.length; i++) {
					if (this.expenseTypeEntities[i].id === evt.detail.value) {
						this.currentRadioType = (i + 1)
						this.expenseEntity.expenseType = (i + 1)
						break
					}
				}
			},
			radioChangePayType: function(evt) {
				for (let i = 0; i < this.expensePayTypeEntities.length; i++) {
					if (this.expensePayTypeEntities[i].id === evt.detail.value) {
						this.currentRadioPayType = i
						this.expenseEntity.payType = i
						break
					}
				}
			}
		}
	}
</script>

<style>
	@import '@/static/css/AddExpenseBaseInfo.css';
</style>